Skip to main content

ySelectionPicker

yselectionpicker

Description​

The ySelectionPicker is a UI component designed for creating selectable lists in web applications. It provides a user-friendly interface for selecting one or more items from a given set of options. The ySelectionPicker can for example be used for:

Basic Structure​

In the following the basic structure of the ySelectionPicker shall be explained. For the general structure of a yComponent please visit the

.

@note image

The ySelectionPicker as seen above contains a label and a helper text.

Label​

The label contains the text inside the ySelectionPicker. It is on the left side of the component. It will get moved to the top, when a selection is document. The label can be clicked to trigger a Selection to make the selection list visible. You can find further explanation at the Label Property.

Helper Text​

The Helper Text is similar to the label and displays a hint related to the input that will be expected. In certain situations the helper text will be replaced by a warning or error text, which can either be set through the automatic validation or custom scripts.

Spinner Icon​

The spinner icon can also be used to make a selection and make the selection list visible. It is on the right side of the ySelectionPicker.

Properties​

Through its various properties the ySelectionPicker can be configured to suit your needs. The display below provides you with an overview of all the ySelectionPicker properties.

Properties can be changed directly through three methods:

  • Inside the Toolbar, which is positioned in your workarea next to your component where you need it. It shows the most important properties, thus providing a fast and efficient way to configure your component in the most basic way.
  • It may also occur in the Toolbar Extension, which is a seamless extension accesible as a dropdown item of the Toolbar. It extends the functionality of the Toolbar by providing advanced pickers for most used properties.
  • Inside the Detail Panel, which is located in the righthand drawer. Every property of a component can be configured here.
METAread more
Name: componentId
Not Editable
Number Property
--y-selection-picker__component-id

The identifier of the component that is unique within a page.

Name: componentType
Not Editable
String Property
--y-selection-picker__component-type

The type of the component. For this component it is -selection-picker.

Name: name
String Property
--y-selection-picker__name

The custom name of the component. It serves for better identification of the component.

Name: version
String Property
--y-selection-picker__version

The custom version of the SelectionPicker-component. This can be used to ensure that all components work well together.

Name: coreTheme
String Property
--y-selection-picker__core-theme

The CoreTheme, which will be apllied to the SelectionPicker. For further information on themes visit the themes page.

Name: subTheme
String Property
--y-selection-picker__sub-theme

The subtheme subordinated to the previously specified CoreTheme, which will be apllied to the SelectionPicker. For further information on themes visit the themes page.

Name: groupTheme
String Property
--y-selection-picker__group-theme

The group theme is a further variation of the subtheme which is specified especially for variations of a component inside the subtheme. For further information on themes visit the Theme-Manager page.

DISPLAYread more
Name: display
String Property
--y-selection-picker__display

This property specifies the display behavior of the component. This can be be set to:

  • none
  • block
  • flex
  • inline
Name: position
Not Editable
String Property
--y-selection-picker__position

This property specifies the type of positioning method used for the component. This can be be set to:

  • static
  • relative
  • absolute
  • sticky
  • fixed
Name: visible
String Property
--y-selection-picker__visible

This property can toggle the visibility of the component. The two modes are completely hidden and fully shown.

SIZEread more
Name: minWidth
Injectable
UnitNumber Property
--y-selection-picker__min-width

The minimum value for the width of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
Name: minHeight
Injectable
UnitNumber Property
--y-selection-picker__min-height

The minimum value for the height of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
Name: width
Injectable
UnitNumber Property
--y-selection-picker__width

The value for the width of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • auto
Name: height
Injectable
UnitNumber Property
--y-selection-picker__height

The value for the height of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • auto
Name: maxWidth
Injectable
UnitNumber Property
--y-selection-picker__max-width

The maximum value for the width of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • none
Name: maxHeight
Injectable
UnitNumber Property
--y-selection-picker__max-height

The maximum value for the height of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • none
Name: flex
String Property
--y-selection-picker__flex

The flex property sets the length on flexible items. This sets the value in n-fold shares extrapolated to all other components with the flex display within the same container.

PLACEMENTread more
Name: marginTop
Injectable
UnitNumber Property
--y-selection-picker__margin-top

This property creates a space around the component, outside of the top border. This can be set in percent or pixels.

Name: marginRight
Injectable
UnitNumber Property
--y-selection-picker__margin-right

This property creates a space around the component, outside of the right border. This can be set in percent or pixels.

Name: marginBottom
Injectable
UnitNumber Property
--y-selection-picker__margin-bottom

This property creates a space around the component, outside of the bottom border. This can be set in percent or pixels.

Name: marginLeft
Injectable
UnitNumber Property
--y-selection-picker__margin-left

This property creates a space around the component, outside of the left border. This can be set in percent or pixels.

Name: paddingTop
Injectable
UnitNumber Property
--y-selection-picker__padding-top

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Name: paddingRight
Injectable
UnitNumber Property
--y-selection-picker__padding-right

This property creates a space within the component, inside of the right border. This can be set in percent or pixels.

Name: paddingBottom
Injectable
UnitNumber Property
--y-selection-picker__padding-bottom

This property creates a space within the component, inside of the bottom border. This can be set in percent or pixels.

Name: paddingLeft
Injectable
UnitNumber Property
--y-selection-picker__padding-left

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Usage​

In this section you'll find a collection of application scenarios and examples that illustrate how to leverage the ySelectionPicker in ways that deviate from its standard behavior, as defined by yBase. This section aims to inspire and guide you through various possibilities, helping you to implement more complex or unique functionalities tailored to your specific needs. General properties that are universally applicable can be found in the yBase usage section.

Variations​

SelectionPicker Elevated
SelectionPicker Flat
SelectionPicker Outlined
SelectionPicker Rounded
SelectionPicker Plain
genericsizeminWidth200px
genericsizemaxHeight44px
stylebackgroundbg-color__normal#44ddbb
styleshadowbox-shadow__normal0 3px 6px 0 rgba(16, 18, 24, 0.2)
styleborderborder-radius8px
stylelabellabel__font-color__normal#FFFFFF
stylehinthint
styleindicatorindicator__height0px

Special Variations​

componentstateclearabletrue
stylebackgroundbg-color__normal#FFFFFF
styleborderborder-color__normal#E0E0E0
stylelabellabel__font-color__normal#22aaff
linkscontentsourceLinkContent'/api/options-list'

Options can include clearable selections, multi-select capabilities, and a search function. You can also have configurations with no label or hint text for a minimalistic approach.

Display Modes​

The picker supports different modes for displaying options:

  • showOnlyIcons
    Only icons are visible for each item.
  • iconsAndLabel
    Both icons and labels are shown.
  • labelOnly
    Only the text label of each item is displayed.
  • itemSeparator
    Defines a visual separator between items.
  • activeItem
    Highlights the currently selected item.

SourceLinks for label, hint, and content can be configured to fetch data dynamically or link to different parts of the application. For more Information see the SourceLinks section.

Validation​

The ySelectionPicker includes an error state that can be used to display validation messages. The validation has to be done manually via javascript.

EvtListSelect
// enabled async function
// async function onSelectionPicker_1_EvtListSelect (apiObject, component, eventData) {

const selectedProduct = eventData.data;
const isOnStock = testIfProductIsInStock(eventData.data); //own global function

if (!isOnStock) {
  // Display validation error message
  component.set("component", "state", "error", true);
  component.set(
    "component",
    "error",
    "errorMessage",
    "Please enter a valid search term."
  );
} else {
  // Clear error message
  component.set("component", "state", "error", false);
}
//}

OptionList​

You can set the list of selectable options using the "optionList" property which can be found in style > list group. There you can add entries and give them a unique value, a label and a tooltip. Read more about the OptionList here.

How to:

  1. Open Detail Panel: Use the Toolbar to access detailed settings.
  2. Navigate to "Style" Category: Open the category to adjust component-specific settings.
  3. Access "List" Group: Here you can find the options list.
  4. Edit Options List: Click on the "optionList" to open the configuration window where you can add new entries (value, label, tooltip) or modify existing ones.

Payment Selection​

SelectionPicker EvtListSelect
// function onSelectionPicker_1_EvtListSelect (apiObject, component, eventData)
const selectedValue = component.get("style", "content", "value");
const proceedButton = apiObject.ui.getObject("proceedButtonId"); // Replace with actual ID
const validPaymentMethods = ["creditCard", "paypal", "bankTransfer"];

if (validPaymentMethods.includes(selectedValue)) {
  // Enable the proceed button if a valid payment method is selected
  proceedButton.set("component", "state", "disabled", false);
  console.log("Valid payment method selected:", selectedValue);
} else {
  // Keep the proceed button disabled if the selection is not valid
  proceedButton.set("component", "state", "disabled", true);
  console.error("Invalid payment method selected:", selectedValue);
}
// }

User Role Selection​

SelectionPicker EvtListSelect
// function onSelectionPicker_1_EvtListSelect (apiObject, component, eventData)
const selectedValue = component.get("style", "content", "value");
const additionalOptionsPanel = apiObject.ui.getObject(
  "additionalOptionsPanelId"
); // Replace with actual ID
const rolesWithAdditionalOptions = ["administrator", "editor"];

if (rolesWithAdditionalOptions.includes(selectedValue)) {
  // Show additional options if the selected role has extra permissions
  additionalOptionsPanel.set("generic", "display", "visible", "visible");
  console.log("Additional options displayed for role:", selectedValue);

  // You might want to fetch and display these additional options dynamically
  fetchAndDisplayAdditionalOptions(selectedValue);
} else {
  // Hide additional options if the selected role does not have extra permissions
  additionalOptionsPanel.set("generic", "display", "visible", "hidden");
  console.log("No additional options for role:", selectedValue);
}
// A mock function to fetch additional options based on the selected role
function fetchAndDisplayAdditionalOptions(role) {
  // Fetching logic here...
  console.log("Fetching additional options for role:", role);
  // Display logic here...
}
// }

Special Picker​

There is a special picker for the ySelectionPicker in the Toolbar as a Toolbar Extension which will be used to link the component to a logic of 2 or more other components. This is a kind of SourceLink Picker, similar to other SourceLink Pickers to be found in other components.